import {Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
    selector: 'countdown',
    template: '<h1>Time left:{{seconds}}</h1>',
    styles: ['h1{ color: #900}'],
    encapsulation: ViewEncapsulation.Emulated
})

class CountdownComponent {
    @Input() seconds: number;
    intervalId: number;
    @Output() complete: EventEmitter<any> = new EventEmitter();
    @Output() progress: EventEmitter<number> = new EventEmitter();

    constructor() {
        this.intervalId = setInterval(() => this.tick(), 100);
    }

    private tick(): void {
        if (--this.seconds < 1) {
            clearInterval(this.intervalId);
            //完成倒计时后会发生事件
            this.complete.emit(null);
        }
        this.progress.emit(this.seconds);
    }
}

@Component({
    selector: 'pomodoro-trimer',
    directives: [CountdownComponent],
    templateUrl: './pomodoro-timer.html'
})
class PomodoroTimerComponent {
    // timeout: number;  //不再需要
    onCountdownCompleted(): void {
        alert('Time up!');
    }
}
bootstrap(PomodoroTimerComponent)